//登录成功后显示用户名
let username = localStorage.getItem("username");
if (username != null) {
  console.log(username);
  let usernameStr = username.substring(0, 3);
  let headerLohin = document.querySelector(".headerLohin");
  let login = `
<span>欢迎登录，${usernameStr}</span>
<i>|</i>
<a href="./login.html" id='logout'>注销登录</a>
`;
  headerLohin.innerHTML = login;
}

//注销
if (username != null) {
  let logout = document.querySelector("#logout");
  logout.addEventListener("click", function () {
    localStorage.removeItem("username");
  });
}

//加鼠标移入移出事件
let lists = document.querySelectorAll(".headerNav_left li");
// console.log(lists)
lists.forEach(function (v) {
  v.onmouseover = function () {
    console.log(this);
    this.classList.add("listAll");
    console.log(this.firstElementChild);
    this.firstElementChild.style.color = "#ff6699";
  };
  v.onmouseout = function () {
    this.classList.remove("listAll");
    this.firstElementChild.style.color = "#555";
    lists[1].firstElementChild.style.color = "#ff6699";
    // console.log(lists[0])
  };
});
//content
let contUrl = `https://api5.hanfuhui.com/Product/GetProductListPublic?count=40&page=1`;
// let page = 1;
axios.get(contUrl).then(function (r) {
  // console.log(r)
  let contArr = r.data.Data;
  console.log(contArr);
  let contStr = contArr.map(
    (v) => `
  <li>
  <a href="#"><img src="${v.FaceSrc + "_250x250.jpg"}" alt="" /></a>
  <p class="price"><span>${"￥" + v.PriceRange}</span></p>
  <p class="name">
    <a href="#"
      >${v.Name}</a
    >
  </p>
  <p class="other">
    <a href="#">${v.Shop.Name}</a>
    <i>包邮</i>
  </p>
</li>
  `
  );
  document.querySelector("#contList").innerHTML = contStr.join("");
});

let btns = document.querySelectorAll(".footer_content p");
// console.log(btns)
// let btnSpan = document.querySelectorAll(".footer_content span")
btns.forEach(function (v) {
  v.addEventListener("click", function () {
    // console.log(this.innerHTML)
    let page = this.innerHTML;

    btns.forEach((v) => v.classList.remove("active"));
    v.classList.add("active");
    //content
    let contUrl = `https://api5.hanfuhui.com/Product/GetProductListPublic`;
    // let page = 1
    axios.get(contUrl, { params: { count: 40, page } }).then(function (r) {
      // console.log(r)
      let contArr = r.data.Data;
      // console.log(contArr)
      let contStr = contArr.map(
        (v) => `
        <li>
        <a href="#"><img src="${v.FaceSrc + "_250x250.jpg"}" alt="" /></a>
        <p class="price"><span>${"￥" + v.PriceRange}</span></p>
        <p class="name">
            <a href="#"
            >${v.Name}</a
            >
        </p>
        <p class="other">
            <a href="#">${v.Shop.Name}</a>
            <i>包邮</i>
        </p>
        </li>
        `
      );
      document.querySelector("#contList").innerHTML = contStr.join("");
    });
  });
});

//回到顶部
var btn = document.querySelector("#toTop");
window.onscroll = function () {
  if (document.documentElement.scrollTop > 500) {
    btn.style.opacity = "1";
  } else {
    btn.style.opacity = "0";
  }
};
btn.onclick = function () {
  // document.documentElement.scrollTop = 0;//
  document.documentElement.scrollTo({
    top: 0,
    //滚动的行为平滑
    behavior: "smooth",
  });
};
